<template>
  <div class="rlbWin" :class="modalClass" @click="hide" id="modal-box">
    <div  id="content" @click.stop="">
      <p class="logo">
        <img src="../common/imgs/rlbLogo.png" alt="">
      </p>
      <p class="p2">众乐邦授权登陆</p>
      <p class="p_input">
        <span><img src="../common/imgs/zlbphone.png" alt=""></span>
        <input type="text" placeholder="请输入众乐邦注册手机号" v-model="zlbPhone">
      </p>
      <p class="p_input">
        <span><img src="../common/imgs/zlbcode.png" alt=""></span>
        <input type="password" v-model="zlbPws" placeholder="请输⼊密码" id="zlbPWS"
               autocomplete="off" onclick="this.focus()">
      </p>
      <label for="savePws">
        <input type="checkbox" id="savePws" v-model="savePws">
        <span class="checkstyle"></span>
        <span class="text">记住账号密码</span>
      </label>
      <button class="submit" :class="zlbPhone && zlbPws ? 'yellow' : 'grey'" @click.stop.prevent="loginZlb">登陆</button>
      <button class="cancel" @click="hide">取消</button>
    </div>
  </div>
</template>

<script>
  /*登录众乐帮 弹窗*/
  import {loginZlb} from "../http/api";
  import {get ,set , remove} from '../common/js/storage';
  // import {apiReady} from "../common/js/initApiApp"; //storage操作
  export default {
    name: "loginZlb",
    data(){
      return{
        modalClass: 'modal-hide',
        pwsType : 'password',
        zlbPws : '',
        zlbPhone : '',
        savePws : false,
        app : '',
        account : '',
      }
    },
    mounted() {},
    methods:{
      getApp(app){
        this.app = app;
        this.account = this.app.getAccount();
        let thiz = this;
        thiz.zlbPhone = '';
        thiz.zlbPws = '';
        let stgSavePws = Number(get('savePws') || 0); //检测是否保存密码和账号
        if(stgSavePws === 1){
          thiz.pwsType = 'password';
          thiz.zlbPhone =  get('zlbPhone' );
          thiz.zlbPws =  get('zlbPws' );
        }
        thiz.savePws =  stgSavePws === 1 ? true : false;
      },
      show(){
        this.modalClass = 'modal-show';
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      loginZlb(){
        let thiz = this;
        let param = {
          token : thiz.account.token,
          version : thiz.app.inAV,
          username : thiz.zlbPhone,
          pwd : thiz.zlbPws,
          // "token":"2f9d8e2f3da44d7509562613d5e5be64","version":"6.1.0","username":"17628049648","pwd":"duyu123456"
        };
        if(thiz.savePws){
          set('zlbPhone' , thiz.zlbPhone);
          set('zlbPws' , thiz.zlbPws);
        } else {
          set('zlbPhone' , '');
          set('zlbPws' , '');
        }
        set('savePws' , thiz.savePws ? '1' : '0');
        loginZlb(param).then(res => {
          thiz.log('登录众乐帮接口返回',res);
          if(res.code == 200){
            require('../common/js/toast').toast('登录成功');
            thiz.hide();
            thiz.$emit('loginSuccess');
          }
        });
      },
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  #modal-box{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;
    padding-top: 0;padding-bottom: 0;
  }
  #content{
    width: calc( 100% - 0.4rem );height: 8.26rem;margin-top: -4.13rem;left: 0.2rem;top: 50%;padding: 0.44rem 0;padding-bottom: 0;
    overflow:hidden;background: #FFFFFF;border-radius: 0.08rem;position: absolute;
  >.logo{
    text-align: center;
  >img{
    width: 1.2rem;
  }
  }
  >.p2{
    text-align: center;color: #333333;font-size: 0.4rem;padding-top: 0.14rem;padding-bottom: 0.2rem;
  }
  >.p_input{
    height: 1.06rem;overflow: hidden;width: calc( 100% - 0.56rem );margin: 0 auto;border-bottom: 0.015rem solid#ECECEC;
  >span{
    text-align: center;line-height: 1.06rem;display: inline-block;width: 0.66rem;float: left;
  >img{
    width: 0.42rem;height: 0.42rem;vertical-align: middle;
  }
  }
  >input{
    width: calc( 100% - 0.66rem );float: right;height: 100%;background: none;
  }
  }
  >label{
    padding: 0 0.26rem;display: block;padding-top: 0.35rem;
  >input{
    width: 0;height: 0;border:0;overflow: hidden;
  }
  >.checkstyle{
    background: none;border: 0.02rem solid#D4D4D4;border-radius: 0.04rem;display: inline-block;width: 0.3rem;height: 0.3rem;float: left;margin-left: 0.2rem;
  }
  >input:checked+.checkstyle{
    background: url("../common/imgs/checkstyle_box.png");background-size: 100% 100%;border: 0;
  }
  >.text{
    color: #999999;font-size: 0.22rem;line-height: 0.3rem;float: left;padding-left: 0.2rem;
  }
  }
  >button{
    height: 0.88rem;border-radius: 0.04rem;width: calc( 100% - 0.52rem );margin: 0 auto;float: none;margin-left: 0.26rem;margin-top: 0.25rem;color: #262626;line-height: 0.88rem;
  }
  >.grey{
    background: #ECECEC;
  }
  >.cancel{
    background: #fff;border: 0.02rem solid#D4D4D4;color: #262626;font-size: 0.3rem;
  }
  }
  #content>div>div{
    -ms-overflow-style: none;
    /*火狐下隐藏滚动条*/
    scrollbar-width: none;
  }
  #content>div>div::-webkit-scrollbar {width:2px; height:10px;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  #content>div>div::-webkit-scrollbar-track {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);} /*定义滚动条轨道 内阴影+圆角*/
  #content>div>div::-webkit-scrollbar-thumb {background: #ffd309; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(255, 171, 50, 0.62);} /*定义滑块 内阴影+圆角*/
  .modal-hide{
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .modal-show{
    visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    backface-visibility: visible;
  }
  #content{
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .modal-hide>#content {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
  }
  .modal-show>#content {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
</style>
